<template>
	<div v-if="list.creator" class="m-playlist">
		<section class="u-plhead pylst_header">
			<div class="plhead_bg" data-reactid="3" :style="{backgroundImage:'url('+list.coverImgUrl+')'}"></div>
			<div class="plhead_wrap" data-reactid="4">
				<div class="plhead_fl lsthd_fl" data-reactid="5">
					<img class="u-img" :src="list.coverImgUrl" data-reactid="6">
					<span class="lsthd_icon" data-reactid="7">
						歌单
					</span>
					<i class="u-earp lsthd_num" data-reactid="9">{{packUp(list.playCount)}}万</i>
				</div>
				<div class="plhead_fr" data-reactid="10">
					<h2 class="f-thide2 f-brk lsthd_title" data-reactid="11">{{list.name}}</h2>
					<div class="lsthd_auth f-thide" data-reactid="12">
						<a class="lsthd_link" data-reactid="13">
							<div class="u-avatar lsthd_ava">
								<img class="u-img" :src="list.creator.avatarUrl">
								<span class="ava-icon ava-icon-daren" v-if="list.creator.expertTags"></span>
							</div>
							{{list.creator.nickname}}
						</a>
					</div>
				</div>
			</div>
		</section>
		<section class="pylst_intro">
			<div class="lstit_tags">
				标签：
				<em class="f-bd f-bd-full lstit_tag" v-for="item in list.tags">{{item}}</em>
			</div>
			<div class="u-intro">
				<div class="f-brk" :class="{'f-thide3':kg}" @click="hidoh()">
					<span data-reactid="24">
						<i data-reactid="25">简介：{{list.description}}</i>
						<br data-reactid="26">
					</span>
				</div>
				<span class="intro_arrow" :class="[{'u-arowdown':kg},{'u-arowup':up}]"></span>
			</div>
		</section>
		<musiclist></musiclist>
		<commentdetail></commentdetail>
	</div>
</template>

<script>
	import api from '.././api/index.js'
	import musiclist from './musiclist.vue'
	import commentdetail from './commentDetail.vue'
	export default {
		components: {
			musiclist,
			commentdetail
		},
		mounted() {
			// 做AJAX请求
			this._initData()
			this.$store.commit("setHidhd", {
				hidhd: true
			})
		},
		data() {
			return {
				list: "",
				kg: true,
				up: false
			}
		},
		methods: {
			_initData() {
				return new Promise((resolve, reject) => {
					var xhr = new XMLHttpRequest();
					xhr.open("GET", api.playlist + "?id=" + this.$route.params.id);
					xhr.send();
					xhr.addEventListener("readystatechange", function() {
						if(xhr.readyState == 4) {
							if(xhr.status == 200) {
								resolve(xhr.response);
							}
						}
					})
				}).then((res) => {
					this.list = JSON.parse(res).playlist
				})
			},
			packUp(i) {
				let a = i / 10000
				a = Number(a.toFixed(1))
				return a
			},
			hidoh() {
				this.kg = !this.kg
				this.up = !this.up
			}
		}
	}
</script>

<style scoped>
	section {
		display: block;
	}
	
	.m-playlist {
		background-color: #f8f8f8;
		min-height: 100%;
	}
	
	.u-plhead {
		position: relative;
		padding: 30px 10px 30px 15px;
		overflow: hidden;
	}
	
	.u-plhead .plhead_bg {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50%;
		-webkit-filter: blur(20px);
		filter: blur(20px);
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
	}
	
	.u-plhead .plhead_bg,
	.u-plhead .plhead_bg:after {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	
	.u-plhead .plhead_bg:after {
		content: " ";
		background-color: rgba(0, 0, 0, .25);
	}
	
	.u-plhead .plhead_wrap {
		display: flex;
		position: relative;
		z-index: 2;
	}
	
	.u-plhead .plhead_fl {
		position: relative;
		width: 114px;
		height: 114px;
		background-color: #e2e2e3;
	}
	
	@media screen and (min-width: 360px) .u-plhead .plhead_fl {
		width: 126px;
		height: 126px;
	}
	
	.u-img {
		width: 100%;
		vertical-align: middle;
	}
	
	.pylst_header .lsthd_icon {
		position: absolute;
		z-index: 3;
		top: 10px;
		left: 0;
		padding: 0 8px;
		height: 17px;
		color: #fff;
		font-size: 9px;
		text-align: center;
		line-height: 17px;
		background-color: rgba(217, 48, 48, .8);
		border-top-right-radius: 17px;
		border-bottom-right-radius: 17px;
	}
	
	.pylst_header .lsthd_num {
		position: absolute;
		right: 2px;
		top: 0;
		z-index: 3;
		padding-left: 15px;
		color: #fff;
		font-size: 12px;
		background-position: 0;
		background-repeat: no-repeat;
		background-size: 11px 10px;
		text-shadow: 1px 0 0 rgba(0, 0, 0, .15);
	}
	
	.pylst_header .lsthd_fl:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 18px;
		z-index: 2;
		background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .2));
	}
	
	.u-plhead .plhead_fr {
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
		width: 1%;
		margin-left: 16px;
	}
	
	.f-brk {
		word-wrap: break-word;
		word-break: break-all;
		white-space: normal;
	}
	
	.f-thide2,
	.f-thide3,
	.f-thide4 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.pylst_header .lsthd_title {
		padding-top: 1px;
		font-size: 17px;
		line-height: 1.3;
		color: #fefefe;
		height: 44px;
		display: -webkit-box;
		-webkit-box-pack: center;
	}
	
	.f-thide {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: normal;
	}
	
	.pylst_header .lsthd_auth {
		display: block;
		position: relative;
		margin-top: 20px;
	}
	
	.pylst_header .lsthd_link {
		display: inline-block;
		color: hsla(0, 0%, 100%, .7);
	}
	
	.u-avatar {
		position: relative;
		width: 100%;
	}
	
	.pylst_header .lsthd_ava {
		display: inline-block;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 5px;
	}
	
	.u-img {
		width: 100%;
		vertical-align: middle;
	}
	
	.u-avatar>.u-img {
		border-radius: 50%;
	}
	
	.u-earp {
		background-image: url(../../public/img/listen.svg);
	}
	
	.pylst_intro {
		position: relative;
		margin: 0 10px 0 15px;
		padding-top: 10px;
		line-height: 19px;
		color: #666;
	}
	
	.lstit_tags {
		margin-bottom: 10px;
		line-height: 20px;
		margin-right: -10px;
	}
	
	.f-bd {
		position: relative;
	}
	
	.lstit_tag {
		display: inline-block;
		margin-right: 10px;
		padding: 1px 8px;
		font-size: 12px;
	}
	
	.u-intro {
		position: relative;
		padding-bottom: 18px;
		line-height: 19px;
		color: #666;
	}
	
	.f-brk {
		word-wrap: break-word;
		word-break: break-all;
		white-space: normal;
	}
	
	.f-thide3 {
		-webkit-line-clamp: 3;
	}
	
	i,
	em {
		font-style: normal;
	}
	
	.u-arowdown {
		background-image: url(../../public/img/down.png);
	}
	
	.u-arowup {
		background-image: url(../../public/img/Up.png);
	}
	
	.u-intro .intro_arrow {
		position: absolute;
		bottom: 3px;
		right: 0;
		z-index: 3;
		width: 30px;
		height: 30px;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 12px auto;
	}
	
	.f-bd:after {
		position: absolute;
		z-index: 2;
		content: "";
		top: 0;
		left: 0;
		pointer-events: none;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		-webkit-transform-origin: top left;
		transform-origin: top left;
		border: 0 solid rgba(0, 0, 0, .1);
	}
	
	.f-bd-full:after {
		border-width: 1px;
	}
	
	.lstit_tag:after {
		border-radius: 9999px;
	}
	
	.u-avatar .ava-icon {
		position: absolute;
		right: -5px;
		bottom: 0;
		width: 12px;
		height: 12px;
		background-image: url(../../public/img/iconlist.png);
		background-repeat: no-repeat;
		background-size: 75px auto;
	}
	
	.u-avatar .ava-icon.ava-icon-daren {
		background-position: -40px 0;
	}
</style>